import React, { Component } from "react";
import PropTypes from "prop-types";
import cx from "classnames";
import { mid2Url } from "@ali/ding-mediaid";
import autobind from "autobind-decorator";
import { Icon } from "@ali/ding-ui";
// components
import DDAvatar from "../../components/Avatar";

import { get } from "../../utils/db.js";

const mapper = {
  "1": { color: "orange", text: "待入职" },
  "2": { color: "green", text: "试用期" },
  "3": { color: "blue", text: "正式" },
  "5": { color: "red", text: "待离职" },
  "4": { color: "grey", text: "已离职" }
};
function getTagProps(status) {
  return mapper[status];
}

export default class Avatar extends Component {
  constructor(props) {
    super(props);
  }

  @autobind
  openProfile() {
    dd.biz.util.open({
      name: "profile",
      params: { id: this.props.userInfo.userId, corpId: get("corpId") },
      onSuccess: function() {
        console.info("open profile success");
      },
      onFail: function(err) {
        console.error("open profile fail", err);
      }
    });
  }
  render() {
    const userInfo = this.props.userInfo || {};

    const {
      name = "",
      avatar = "",
      workDaysContent,
      perfectFlag,
      employeeStatus,
      dept,
      from
    } = userInfo;
    const tagProps = getTagProps(employeeStatus) || {};
    return (
      <div className="growth-avatar-container" onClick={this.openProfile}>
        <div className="growth-avatar-dd">
          <DDAvatar
            name={name}
            size=""
            fontSize={28}
            width={96}
            avatar={avatar && mid2Url(avatar, { imageSize: "thumb" })}
            className="growth-avatar-dd-avatar"
            font=""
          />
        </div>
        {// 待入职
        employeeStatus === "1" ? (
          <div className={`growth-avatar-brand growth-avatar-brand-twoline`}>
            <div className="growth-avatar-brand-name">{name}</div>
            <div className="growth-avatar-brand-from">{from}</div>
          </div>
        ) : (
          <div
            className={`growth-avatar-brand growth-avatar-brand-${dept
              ? "twoline"
              : "oneline"}`}
          >
            <div className="growth-avatar-brand-name">
              {name}
              <span
                className={cx("growth-avatar-tag", {
                  [tagProps.color]: !!tagProps.color
                })}
              >
                {tagProps.text}
              </span>
            </div>
            {dept ? (
              <div className="growth-avatar-brand-title">{dept}</div>
            ) : null}
            {workDaysContent && (
              <div className="growth-avatar-brand-desc">{workDaysContent}</div>
            )}
            {//信息填写不完整 离职的不显示
            /*
              perfectFlag === false && employeeStatus !== '4' ? <div className='growth-avatar-waring'>
                <Icon size="xxs" type={require('../../../assets/svg/warning.svg')} />
                必填信息不完整，请补充
          </div> : ""*/
            }
          </div>
        )}

       
       
      </div>
    );
  }
}
Avatar.propTypes = {
  userInfo: PropTypes.shape({
    name: PropTypes.string,
    dept: PropTypes.string,
    avatar: PropTypes.string
  })
};
